<template>
    <!-- 人员管理-人员培训-培训详情 -->
    <div class="trainDetail">
        <div class="top">
            <div class="search">
                <div
                    class="list"
                    style="cursor: pointer"
                    @click="goBack">
                    <Icon
                        type="ios-arrow-back"
                        style="font-size: 16px" />返回
                </div>
                <div class="list">
                    <Select
                        v-model="traineePassType"
                        style="width: 200px"
                        placeholder="及格状态:全部"
                        @on-change="getPassType">
                        <Option
                            v-for="item in passFlagList"
                            :value="item.id"
                            :key="item.id"
                            >{{ item.name }}</Option
                        >
                    </Select>
                    <input
                        type="password"
                        autocomplete="new-password"
                        style="display: none" />
                </div>
                <div class="list">
                    <Select
                        v-model="traineeWorkRoleType"
                        style="width: 200px"
                        placeholder="工人类型:全部"
                        @on-change="getWorkRoleType">
                        <Option
                            v-for="item in workRolelist"
                            :value="item.id"
                            :key="item.id"
                            >{{ item.name }}</Option
                        >
                    </Select>
                    <input
                        type="password"
                        autocomplete="new-password"
                        style="display: none" />
                </div>
                <div class="list">
                    <Input
                        search
                        enter-button
                        placeholder="请输入关键字"
                        style="width: 250px"
                        @on-search="onSearch"
                        @on-enter="onSearch"
                        v-model="traineeKeyword" />
                    <input
                        type="password"
                        autocomplete="new-password"
                        style="display: none" />
                </div>
                <input
                    type="text"
                    class="intBox"
                    style="display: none" />
            </div>
            <div class="down">
                <el-button
                    :type="state != 0 || !btnList.includes('emp/train/addEmps') ? 'info' : 'primary'"
                    @click="updateRow(0)"
                    :disabled="state != 0 || !btnList.includes('emp/train/addEmps')"
                    size="small"
                    plain
                    >添加人员</el-button
                >
                <el-button
                    :type="state != 0 || !btnList.includes('emp/train/complete') ? 'info' : 'primary'"
                    :disabled="state != 0 || !btnList.includes('emp/train/complete')"
                    @click.native.prevent="complete"
                    size="small"
                    plain
                    >提交成绩</el-button
                >
            </div>
        </div>
        <div class="bottom">
            <div class="msg">
                <div class="list">
                    <p>状态:</p>
                    <p>
                        <span v-if="state == 0">未完成</span>
                        <span v-if="state == 1">完成</span>
                    </p>
                </div>
                <div class="list">
                    <p>参加人数:</p>
                    <p>{{ empNum }}人</p>
                </div>
                <div class="list">
                    <p>合格率:</p>
                    <p>{{ qualifiedRate }}</p>
                </div>
            </div>
            <div class="table">
                <el-table
                    :data="empList"
                    style="width: 100%"
                    border
                    :height="tableHeight"
                    :header-cell-style="headClass"
                    :stripe="true">
                    <el-table-column
                        fixed
                        prop="empName"
                        label="员工姓名"
                        width="120"></el-table-column>
                    <el-table-column
                        prop="idCardNo"
                        label="身份证号"
                        width="180"></el-table-column>
                    <el-table-column
                        prop="empPhone"
                        label="手机号"></el-table-column>
                    <el-table-column
                        prop="groupName"
                        label="所在班组"></el-table-column>
                    <el-table-column
                        prop="workRoleName"
                        label="工人类型"></el-table-column>
                    <el-table-column
                        prop="workTypeName"
                        label="工种"></el-table-column>
                    <el-table-column
                        prop="enterTime"
                        label="进场日期"></el-table-column>
                    <el-table-column
                        prop="score"
                        label="成绩"></el-table-column>
                    <el-table-column
                        fixed="right"
                        prop="passFlag"
                        label="是否合格">
                        <template slot-scope="scope">
                            <!-- <span v-if="scope.row.passFlag == 0">不合格</span>
                            <span v-if="scope.row.passFlag == 1">合格</span> -->
                            <el-tag
                                type="info"
                                v-if="scope.row.passFlag == 0"
                                size="small"
                                >不合格</el-tag
                            >
                            <el-tag
                                type="success"
                                v-if="scope.row.passFlag == 1"
                                size="small"
                                >合格</el-tag
                            >
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="imgUrlList"
                        label="成绩图片"
                        width="200px">
                        <template slot-scope="scope">
                            <template v-if="scope.row.imgUrlList && scope.row.imgUrlList.length > 0">
                                <el-image
                                    v-for="(src, index) in scope.row.imgUrlList"
                                    :src="src"
                                    :key="index"
                                    style="display: inline-block; width: 45px; height: 45px"
                                    :preview-src-list="scope.row.imgUrlList"></el-image>
                            </template>
                            <span v-else>—</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        fixed="right"
                        label="操作"
                        width="250"
                        align="center">
                        <template slot-scope="scope">
                            <el-button
                                :disabled="!btnList.includes('emp/train/addScore')"
                                @click.native.prevent="scoreRow(scope.$index, empList)"
                                type="text"
                                size="small"
                                >编辑成绩</el-button
                            >
                            <el-button
                                :style="!btnList.includes('emp/train/delEmp') ? 'color:#C0C4CC' : 'color:red'"
                                :disabled="!btnList.includes('emp/train/delEmp')"
                                @click.native.prevent="remove(scope.$index, empList)"
                                type="text"
                                size="small"
                                >删除</el-button
                            >
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div
                class="clearfix"
                v-show="empList.length > 0">
                <div class="float-right">
                    <Page
                        v-if="totalCount"
                        style="margin: 20px 0; text-align: center"
                        :current.sync="current"
                        :total="totalCount"
                        :page-size="pageSize"
                        show-elevator
                        show-total
                        show-sizer
                        @on-change="pageChange"
                        @on-page-size-change="pageSizeChange"></Page>
                </div>
            </div>
        </div>

        <Modal
            v-model="updateModal"
            :title="isAdd ? '添加培训人员' : '修改添加培训人员'"
            width="1000px"
            :mask-closable="false">
            <div
                class="search"
                style="width: 96%; margin: auto; display: flex; justify-content: flex-start; align-items: center">
                <div
                    class="list"
                    style="margin-right: 20px">
                    <Select
                        v-model="groupId"
                        style="width: 250px"
                        placeholder="班组:全部"
                        @on-change="getGroupType">
                        <Option
                            v-for="(item, index) in groupList"
                            :value="item.groupId"
                            :key="index"
                            >{{ item.groupName }}</Option
                        >
                    </Select>
                    <input
                        type="password"
                        autocomplete="new-password"
                        style="display: none" />
                </div>
                <div class="list">
                    <Input
                        search
                        enter-button
                        placeholder="请输入姓名"
                        style="width: 250px"
                        @on-search="onEmpSearch"
                        v-model="keyword"
                        clearable />
                </div>
            </div>
            <div
                class="table"
                style="width: 96%; margin: 20px auto">
                <el-table
                    :data="list"
                    style="width: 100%"
                    border
                    @select="listSelectOne"
                    @select-all="listSelectALL"
                    height="500px">
                    <el-table-column
                        type="selection"
                        width="60px"></el-table-column>
                    <el-table-column
                        prop="empName"
                        label="姓名"></el-table-column>
                    <el-table-column
                        prop="idCardNo"
                        label="身份证号码"></el-table-column>
                    <el-table-column
                        prop="phone"
                        label="手机号码"></el-table-column>
                </el-table>
            </div>
            <div
                class="clearfix"
                 >
                <div class="float-right">
                    <Page
                        v-if="roletotalCount"
                        style="margin: 20px 0; text-align: center"
                        :current.sync="rolecurrent"
                        :total="roletotalCount"
                        :page-size="pageSize"
                        show-elevator
                        show-total
                        show-sizer
                        @on-change="rolepageChange"
                        @on-page-size-change="rolepageSizeChange"></Page>
                </div>
            </div>
            <div slot="footer">
                <el-button
                    @click="cancel(0)"
                    type="info"
                    size="small"
                    plain
                    >取消</el-button
                >
                <el-button
                    type="primary"
                    @click="submitAll"
                    size="small"
                    plain
                    v-preventReClick="1500"
                    >确定</el-button
                >
            </div>
        </Modal>

        <Modal
            v-model="deleteModal"
            title="删除"
            width="360px;"
            :mask-closable="false">
            <div style="margin: 10px">确定要删除这条数据吗？</div>
            <div slot="footer">
                <el-button
                    @click="cancel(1)"
                    type="info"
                    size="small"
                    plain
                    >取消</el-button
                >
                <el-button
                    @click="detele"
                    type="primary"
                    size="small"
                    plain
                    v-preventReClick="1500"
                    >确定</el-button
                >
            </div>
        </Modal>

        <Modal
            v-model="scoreModal"
            title="录入成绩"
            width="420px;"
            :mask-closable="false">
            <div>
                <div class="item">
                    <span class="tip">*</span>
                    <span>分数:</span>
                    <!-- <Input v-model.number="score" placeholder="请输入分数" style="width: 200px" /> -->
                    <!-- <InputNumber :max="100" :min="1" v-model="score" placeholder="请输入分数" style="width: 200px"></InputNumber> -->
                    <el-input-number
                        v-model="score"
                        controls-position="right"
                        size="small"
                        :min="0"
                        :max="100"
                        placeholder="请输入分数"
                        style="width: 260px"></el-input-number>
                </div>
                <div class="item">
                    <span class="tip">*</span>
                    <span>是否合格:</span>
                    <Select
                        v-model="passScoreFlag"
                        style="width: 260px"
                        placeholder="请选择是否合格"
                        @on-change="getScore">
                        <Option
                            v-for="item in FlagList"
                            :value="item.id"
                            :key="item.id"
                            >{{ item.name }}</Option
                        >
                    </Select>
                </div>
                <div class="item img">
                    <span>成绩图片:</span>
                    <el-upload
                        :class="{ hideAdd: imgFlag }"
                        :data="{ module: 'train_emp' }"
                        ref="uploadImg"
                        :headers="headers"
                        :file-list="imgFileList"
                        :action="$axios.defaults.baseURL + '/ms/api/emp/upload/img'"
                        list-type="picture-card"
                        accept="image/png, image/jpg, image/jpeg"
                        :before-upload="beforeImgUpload"
                        :on-success="reportlogImgSuccess"
                        name="file"
                        :limit="3"
                        style="width: 260px"
                        :on-exceed="exceedImg"
                        :on-remove="handleReportRemove">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </div>
            </div>
            <div slot="footer">
                <el-button
                    @click="cancel(2)"
                    type="info"
                    size="small"
                    plain
                    >取消</el-button
                >
                <el-button
                    @click="sumbitScore"
                    type="primary"
                    size="small"
                    plain
                    v-preventReClick="1500"
                    >提交成绩</el-button
                >
            </div>
        </Modal>

        <Modal
            v-model="completeModal"
            title="完成培训记录"
            width="360px;"
            :mask-closable="false">
            <div style="margin: 10px">确定要完成这条培训记录吗？</div>
            <div slot="footer">
                <el-button
                    @click="cancel(3)"
                    type="info"
                    size="small"
                    plain
                    >取消</el-button
                >
                <el-button
                    @click="completeRecords"
                    type="primary"
                    size="small"
                    plain
                    v-preventReClick="1500"
                    >确定</el-button
                >
            </div>
        </Modal>
    </div>
</template>

<script>
import {
    getAttendPsonList,
    getTrainEmpList,
    getAttendPsonAdd,
    getAttendPsonRemove,
    getAttendPsonScore,
    getAttendComplete,
    getGroupListByDeptId,
    getGroupListByProjectId,
} from "@/api/api.js"
import { GroupCreate } from "@/mixins/group"
export default {
    mixins: [GroupCreate],
    data() {
        return {
            headers: {
                Authorization: localStorage.getItem("COOKIE"),
            },
            imgFileList: [],
            imgFlag: false,
            completeModal: false,
            completeTrainId: "",
            list: [],
            rolecurrent: 1,
            rolepageSize: 10,
            rolepageNum: 1,
            roletotalCount: "",
            passFlagList: [
                {
                    id: "",
                    name: "及格状态:全部",
                },
                {
                    id: 0,
                    name: "不合格",
                },
                {
                    id: 1,
                    name: "合格",
                },
            ],
            FlagList: [
                {
                    id: 0,
                    name: "不合格",
                },
                {
                    id: 1,
                    name: "合格",
                },
            ],
            passScoreFlag: "",
            workRolelist: [
                {
                    id: "",
                    name: "工人类型:全部",
                },
                {
                    id: 1,
                    name: "管理人员",
                },
                {
                    id: 2,
                    name: "施工人员",
                },
            ],
            workTypelist: [],
            traineeKeyword: "",
            traineePassType: "",
            traineeWorkRoleType: "",
            current: 1,
            pageSize: 10,
            pageNum: 1,
            totalCount: "",
            traineeId: "",
            name: "",
            date: "",
            trainTypeName: "",
            organizer: "",
            address: "",
            state: "",
            empNum: "",
            qualifiedRate: "",
            empList: [],
            updateModal: false,
            isAdd: true,
            empIdList: [],
            deleteModal: false,
            removeId: "",
            scoreModal: false,
            passFlag: "",
            score: "",
            scoreId: "",
            stateType: "",
            btnList: [],
            max: 1,
            min: 100,
            tableHeight: window.innerHeight - 345,
            groupId: "",
            keyword: "",
            projectId: "",
            groupList: [],
        }
    },
    watch: {
        imgFileList(val, oldVal) {
            if (val.length == 3) {
                this.imgFlag = true
            } else {
                this.imgFlag = false
            }
        },
    },
    methods: {
        beforeImgUpload(file) {
            const isLt2M = file.size / 1024 / 1024 < 2
            if (!isLt2M) {
                this.$Message.error("上传图片大小不能超过 2MB!")
            }
            return isLt2M
        },
        reportlogImgSuccess(res, file) {
            let obj = {
                url: res.data.path,
                name: file.name,
            }
            this.imgFileList.push(obj)
        },
        exceedImg(files, fileList) {
            if (this.imgFileList.length == 3) {
                this.$Message.warning("上传图片最多3张")
                return
            }
        },
        handleReportRemove(res, fileList) {
            for (let i = 0; i < this.imgFileList.length; i++) {
                if (res.url == this.imgFileList[i].url) {
                    this.imgFileList.splice(i, 1)
                }
            }
        },
        goBack() {
            this.$router.push({
                path: "/emp/train",
            })
        },
        getGroupType(item) {
            this.groupId = item
            this.rolepageNum = 1
            this.rolecurrent = 1
            this.getAllList()
        },
        onEmpSearch() {
            this.rolepageNum = 1
            this.rolecurrent = 1
            this.getAllList()
        },
        complete(index, rows) {
            // this.completeTrainId = rows[index].trainId;
            this.completeModal = true
        },
        completeRecords() {
            getAttendComplete(this.$route.query.trainId)
                .then((res) => {
                    if (res.code == 200) {
                        this.$Message.success("操作成功")
                        this.pageNum = 1
                        this.getTraineeList()
                        this.completeModal = false
                    } else {
                        this.$Message.warning(res.msg)
                    }
                })
                .catch((error) => {
                    console.log(error)
                })
        },
        headClass() {
            return "color: #5E5F60;background:#E1EAFA;important;"
        },
        //获取培训人员列表
        getTraineeList() {
            this.traineeId = this.$route.query.trainId
            let params = {
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                trainId: this.traineeId,
                keyword: this.traineeKeyword,
                passFlag: this.traineePassType,
                workRoleId: this.traineeWorkRoleType,
            }
            getAttendPsonList(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.name = res.data.detail.name
                        this.date = res.data.detail.date ? res.data.detail.date.substring(0, 10) : ""
                        this.name = res.data.detail.name
                        this.trainTypeName = res.data.detail.trainTypeName
                        this.organizer = res.data.detail.organizer
                        this.address = res.data.detail.address
                        this.state = res.data.detail.state
                        this.empNum = res.data.detail.empNum
                        this.qualifiedRate = Number(res.data.detail.qualifiedRate * 100).toFixed(1) + "%"
                        this.empList = res.data.detail.empList
                        this.totalCount = res.data.total
                    } else {
                        this.$Message.warning(res.msg)
                    }
                })
                .catch((error) => {
                    console.log(error)
                })
        },
        //获取人员列表
        getAllList() {
            let params = {
                pageSize: this.rolepageSize,
                pageNum: this.rolepageNum,
                keyword: this.keyword,
                groupId: this.groupId,
                trainId: this.$route.query.trainId,
            }
            getTrainEmpList(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.list = res.data.list
                        this.roletotalCount = res.data.total
                    } else {
                        this.$Message.warning(res.msg)
                    }
                })
                .catch((error) => {
                    console.log(error)
                })
        },
        onSearch() {
            this.pageNum = 1
            this.current = 1
            if (this.traineePassType == undefined) {
                this.traineePassType = ""
            }
            if (this.traineeWorkRoleType == undefined) {
                this.traineeWorkRoleType = ""
            }
            this.getTraineeList()
        },
        getPassType(item) {
            this.traineePassType = item
            this.pageNum = 1
            this.current = 1
            this.getTraineeList()
        },
        getWorkRoleType(item) {
            this.traineeWorkRoleType = item
            this.pageNum = 1
            this.current = 1
            this.getTraineeList()
        },
        pageChange(index) {
            this.pageNum = index
            if (this.traineePassType == undefined) {
                this.traineePassType = ""
            }
            if (this.traineeWorkRoleType == undefined) {
                this.traineeWorkRoleType = ""
            }
            this.getTraineeList()
        },
        pageSizeChange(index) {
            this.pageSize = index
            if (this.traineePassType == undefined) {
                this.traineePassType = ""
            }
            if (this.traineeWorkRoleType == undefined) {
                this.traineeWorkRoleType = ""
            }
            this.getTraineeList()
        },

        rolepageChange(index) {
            this.rolepageNum = index
            this.getAllList()
        },
        rolepageSizeChange(index) {
            this.rolepageSize = index
            this.getAllList()
        },
        //添加
        updateRow(type) {
            if (type == 0) {
                this.isAdd = true
                this.keyword = ""
                this.groupId = ""
            }
            this.getAllList()
            this.updateModal = true
        },
        //多选
        listSelectOne(selection, row) {
            this.empIdList = selection
        },
        //全选
        listSelectALL(selection, row) {
            this.empIdList = selection
        },
        submitAll() {
            if (this.empIdList.length == 0) {
                this.$Modal.warning({
                    title: "提示",
                    content: "请选择人员",
                })
                return
            }
            let url
            let obj = {}
            let arr = []
            for (let i of this.empIdList) {
                arr.push(i.empId)
            }
            let params = {
                trainId: this.$route.query.trainId,
                empIdList: arr,
            }
            getAttendPsonAdd(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.$Message.success("操作成功")
                        this.updateModal = false
                        this.rolepageNum = 1
                        this.rolecurrent = 1
                        this.getTraineeList()
                    } else {
                        this.$Message.warning(res.msg)
                    }
                })
                .catch((error) => {
                    console.log(error)
                })
        },
        //删除
        remove(index, rows) {
            this.removeId = rows[index].empId
            this.deleteModal = true
        },
        detele() {
            let params = {
                trainId: this.$route.query.trainId,
                empId: this.removeId,
            }
            getAttendPsonRemove(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.$Message.success("操作成功")
                        this.pageNum = 1
                        this.getTraineeList()
                        this.deleteModal = false
                    } else {
                        this.$Message.warning(res.msg)
                    }
                })
                .catch((error) => {
                    console.log(error)
                })
        },
        scoreRow(index, rows) {
            this.scoreModal = true
            this.scoreId = rows[index].empId
            this.score = rows[index].score ? rows[index].score : ""
            this.imgFileList = []
            if (rows[index].imgUrlList && rows[index].imgUrlList.length > 0) {
                rows[index].imgUrlList.forEach((v) => {
                    this.imgFileList.push({
                        url: v,
                    })
                })
            }
            if (rows[index].passFlag == 0) {
                this.passFlag = 0
            } else if (rows[index].passFlag == 1) {
                this.passFlag = 1
            } else {
                this.passFlag = ""
            }
        },
        getScore(index) {
            this.passScoreFlag = index
        },
        sumbitScore() {
            if (this.score == "") {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "请输入成绩",
                })
                return
            }
            if (this.passScoreFlag === "" || this.passScoreFlag == undefined) {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "请选择是否合格",
                })
                return
            }
            let params = {
                trainId: this.$route.query.trainId,
                empId: this.scoreId,
                score: parseInt(this.score),
                passFlag: parseInt(this.passScoreFlag),
            }
            params.imgUrlList = []
            this.imgFileList.forEach((v) => {
                params.imgUrlList.push(v.url)
            })
            getAttendPsonScore(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.$Message.success("操作成功")
                        // this.pageNum = 1;
                        this.getTraineeList()
                        this.scoreModal = false
                    } else {
                        this.$Message.warning(res.msg)
                    }
                })
                .catch((error) => {
                    console.log(error)
                })
        },
        cancel(type) {
            if (type == 0) {
                this.updateModal = false
            } else if (type == 1) {
                this.deleteModal = false
            } else if (type == 2) {
                this.scoreModal = false
            } else if (type == 3) {
                this.completeModal = false
            }
        },
    },
    mounted() {
        this.projectId = this.$store.state.porjectObject.deptId
        this.getGRPList(this.projectId)
        this.getTraineeList()
        this.btnList = JSON.parse(localStorage.getItem("arr"))
    },
}
</script>

<style scoped lang="less">
// @import "./../../assets/style/emp_common.less";
@import "./../../assets/style/themeBase.less";
.trainDetail {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background: #f5f5f5;
    .top {
        width: 100%;
        height: 72px;
        background: #fff;
        border-radius: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .search {
            width: auto;
            margin-left: 20px;
            padding-top: 20px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .list {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                padding-bottom: 20px;
                margin-right: 20px;
                span {
                    width: 70px;
                }
            }
        }
        .down {
            width: auto;
            margin-right: 20px;
        }
    }
    .bottom {
        width: 100%;
        height: calc(100% - 82px);
        padding: 20px;
        margin-top: 10px;
        box-sizing: border-box;
        background: #fff;
        border-radius: 10px;
        .down {
            width: 98%;
            margin: 0 auto;
        }
        .msg {
            margin-bottom: 20px;
            display: flex;
            flex-wrap: wrap;
            .list {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                margin-right: 24px;
                p {
                    margin-right: 10px;
                    font-size: 16px;
                    color: #000;
                    &:nth-child(2) {
                        color: red;
                    }
                }
            }
        }
    }
}
.u_model {
    width: 96%;
    margin: 0 auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .list {
        margin-right: 20px;
    }
}
.item {
    width: 80%;
    //   margin: 0 auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 20px;
    position: relative;
    padding-left: 16px;
    box-sizing: border-box;
    &.img {
        /deep/.avatar-uploader {
            flex: 1;
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            flex-wrap: wrap;
        }
        /deep/.el-upload--picture-card {
            width: 60px;
            height: 60px;
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
        }
        /deep/.avatar-uploader .el-upload:hover {
            border-color: var(--themeColor);
        }
        /deep/.avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 60px;
            height: 60px;
            line-height: 60px;
            text-align: center;
        }
        /deep/.el-upload--picture-card {
            line-height: 60px !important;
        }
        /deep/.avatar {
            width: 60px;
            height: 60px;
            display: block;
        }
        /deep/.el-upload-list--picture-card .el-upload-list__item {
            width: 60px !important;
            height: 60px !important;
            margin-right: 25px;
            margin-bottom: 10px;
            &:nth-of-type(3) {
                margin-right: 0px;
            }
        }
        /deep/.el-upload-list__item {
            transition: none !important;
        }
    }
    .tip {
        position: absolute;
        color: red;
        font-size: 16px;
        top: 8px;
        left: 0;
    }
    span {
        display: inline-block;
        width: 80px;
    }
}
.hideAdd {
    /deep/ .el-upload--picture-card {
        display: none;
    }
}
// /deep/.ivu-icon-ios-close{
//     color: #fff;
//     &:hover{
//         color: #fff;
//     }
// }
</style>
